<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        //一、 预定义事件 ： 系统已经定义好的事件。

        // 1.可以一对多 2.延迟执行 
        // let btn = document.querySelector("button");

        // let obj1 = {
        //     name:"我是一个对象",
        //     fn:function(){
        //         console.log("改变了111");
        //     }
        // }

        // let obj2 = {
        //     name:"我是一个对象222",
        //     fn:function(){
        //         console.log("改变了222");
        //     }
        // }

        // btn.addEventListener("click",obj1.fn)  ; // 添加事件监听 
        // btn.addEventListener("click",obj2.fn) 


        // 二、自定义事件

        // 基于一个自定义事件类 
        let myevent = new EventTarget();

        // 绑定自定义事件
        myevent.addEventListener("myevent",function(){
            console.log("自定义事件执行了");
        })

        // 触发自定义事件 
        document.querySelector("button").onclick = function(){
            myevent.dispatchEvent(new CustomEvent("myevent"))
        }
    </script>
</body>
</html>